<template>
  <div id="app">
    <!-- 页顶标题栏 -->
    <mt-header fixed title="PlayCenter">
      <span slot="left" @click="goBack" v-if="!isHome">
        <mt-button icon="back">返回</mt-button>
      </span>
    </mt-header>
    <!-- 内容区域 路由过渡 -->
    <transition name="tabbar">
      <router-view></router-view>
    </transition>
    <!-- 页底导航栏 -->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item-1" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item-1" to="/shopcar">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
          <span class="mui-badge" id="badge" ref="badge">{{ $store.getters.getCountTotal }}</span>
        </span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link class="mui-tab-item-1" to="/music">
        <span class="mui-icon mui-icon-extra mui-icon-extra-heart-filled"></span>
        <span class="mui-tab-label">音乐</span>
      </router-link>
      <router-link class="mui-tab-item-1" to="/game">
        <span class="mui-icon mui-icon-extra mui-icon-extra-grech"></span>
        <span class="mui-tab-label">游戏</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isHome: true
    }
  },
  created() {
    this.isHome = this.$route.path === '/home' ? true : false
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  },
  watch: {
    '$route.path'(newVal, oldVal) {
      this.isHome = newVal === '/home' ? true : false
      
      if(newVal.indexOf('/music') == -1) {
        this.$store.commit('closePlayingList')
      } 
    }
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
html {
  background: #eee;
}
body {
  display: flex;
  overflow-x: hidden;
}
//隐藏滚动条并能滚动
// 兼容chrome和safari
html::-webkit-scrollbar {
  display:none
}
// 兼容火狐
html {
  scrollbar-width: none;
}
// 兼容IE10+
html {
  -ms-overflow-style: none;
}


#app {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  padding-bottom: 50px;
  overflow: hidden;
  .mint-header {
    z-index: 99;
  }

  .mint-button-text {
    text-align: center;
    vertical-align: middle;
  }

  .mui-bar {
    z-index: 99;
  }
  .mui-bar-tab {
    display: block;
    .mui-tab-item-1 {
      display: table-cell;
      overflow: hidden;
      width: 1%;
      height: 50px;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #929292;

      .mui-icon {
        top: 3px;
        width: 24px;
        height: 24px;
        padding-top: 0;
        padding-bottom: 0;
      }
      .mui-icon~.mui-tab-label {
        font-size: 11px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .mui-tab-item-1.mui-active {
      color: #007aff;
    }
  }
}

.tabbar-enter,
.tabbar-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.tabbar-enter-active {
  transition: all .3s ease;
}
.tabbar-leave-active {
  display: none;
}

@media screen and (min-width: 68vh){
  body {
    width: 68vh;
    margin: auto;
    .mint-header {
      width: 68vh;
    }
    .mint-header.is-fixed {
      margin: auto;
    }
    .mui-bar {
      width: 68vh;
      margin: auto;
    }
  }
}
</style>
